<template>
  <div class="production-completion">
    <el-row class="row">
      <card :title-size="16" @title-click="titleClick">
        <div slot="title">
          <span>总体生产进度完成情况</span>
          <i class="el-icon-d-arrow-right"></i>
        </div>
        <el-row>
          <el-col :span="24" class="remaining-time">
            <span>剩余生产时长：</span>
            <span>{{ timer }}</span>
          </el-col>
        </el-row>
        <el-row class="row" :gutter="10">
          <el-col :lg="6" :sm="12" :xs="24" class="col">
            <production-progress
              :percentage="getSingleProgressData('ZMB').finishRate"
              :text="`总目标：${getSingleProgressData('ZMB').totalNum}`"
              color="#d9001b"
              @progress-click="clickHandle(true)"
            />
          </el-col>
          <el-col :lg="6" :sm="12" :xs="24" class="col">
            <production-progress
              :percentage="getSingleProgressData('BNMB').finishRate"
              color="#e86452"
              :text="`本年目标：${getSingleProgressData('BNMB').totalNum}`"
              @progress-click="clickHandle(true)"
            />
          </el-col>
          <el-col :lg="6" :sm="12" :xs="24" class="col">
            <production-progress
              :percentage="getSingleProgressData('BYMB').finishRate"
              color="#5ad8a6"
              :text="`本月目标：${getSingleProgressData('BYMB').totalNum}`"
              @progress-click="clickHandle(false)"
            />
          </el-col>
          <el-col :lg="6" :sm="12" :xs="24" class="col">
            <production-progress
              :percentage="getSingleProgressData('JRMB').finishRate"
              :text="`今日目标：${getSingleProgressData('JRMB').totalNum}`"
              @progress-click="clickHandle(false)"
            />
          </el-col>
        </el-row>
      </card>
    </el-row>
  </div>
</template>
<script>
import { getProgress } from '@/api/home';
import productionProgress from './productionProgress.vue';
export default {
  components: {
    productionProgress,
  },
  data() {
    return {
      timer: null,
      progressData: [],
    };
  },
  created() {
    this.getProgressData();
  },
  methods: {
    titleClick() {
      this.$router.replace({ path: '/progress/month' });
    },
    clickHandle(isMonth, val) {
      const path = isMonth ? '/progress/month' : '/progress/day';
      this.$router.replace({ path });
    },
    getSingleProgressData(name) {
      const result = this.progressData.find(item => item.name === name) || {};
      return {
        finishRate: result.finishRate ? parseInt(result.finishRate) : 0,
        totalNum: result.totalNum,
      };
    },
    getProgressData() {
      const { projectId } = this.$store.getters;
      getProgress({ projectId }).then(res => {
        const { detailList, timer } = res.data || {};
        this.timer = timer;
        this.progressData = detailList;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.production-completion {
  ::v-deep .card-body {
    padding-top: 20px;
  }
  .remaining-time {
    text-align: right;
    font-size: 20px;
    padding: 0 10px 20px 0;
  }
}
</style>
